<template>
<el-table :data="contacts" border>
    <el-table-column label="角色" width="100" align="center">
        <template slot-scope="scope">{{
            roleTypeMap[scope.row.role] ? roleTypeMap[scope.row.role]['title'] : ""
      }}</template>
    </el-table-column>
    <el-table-column label="类型" width="100" align="center">
        <template slot-scope="scope">{{
            contactTypeMap[scope.row.contact_type] ? contactTypeMap[scope.row.contact_type]['title'] : ""
      }}</template>
    </el-table-column>
    <el-table-column label="联系方式" prop="contact"></el-table-column>
    <el-table-column label="是否默认" width="100" align="center">否</el-table-column>
    <el-table-column label="操作" align="center">
        <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" @click="removeContact(scope.$index)" circle></el-button>
        </template>
    </el-table-column>
</el-table>
</template>

<script>
import {
    contactTypes,
    roleTypes
} from "@/config/reflection";

export default {
    name: "ContactList",
    props: {
        contacts: {
            type: Array,
            default: [],
        },
    },
    data() {
        const contactTypesObject = contactTypes.reduce((obj, type) => {
            obj[type.value] = type;
            return obj;
        }, {});

         const roleTypesObject = roleTypes.reduce((obj, type) => {
            obj[type.value] = type;
            return obj;
        }, {});

        return {
            contactTypeMap: contactTypesObject,
            roleTypeMap: roleTypesObject
        };
    },
    methods: {
        // 移除联系方式
        removeContact(index) {
            this.$confirm("确认删除此联系方式", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    this.contacts.splice(index, 1);
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
};
</script>

<style>
</style>
